<template>
  <div
    class="choose-subsystem"
    :style="{backgroundImage: 'url(' + bgImgUrl + ')'}"
  >
    <div class="logout">
      <div class="logout-text" @click="userStore.logout()">退出</div>
    </div>
    <div class="logo">
      <img class="logo-img" :src="logoImgUrl" alt="" />
    </div>
    <div class="subsystem-list">
      <div
        class="subsystem-item"
        v-for="subsystem in subsystemList"
        :key="subsystem.id"
      >
        <el-badge
          :value="subsystem.badgeNumber || 0"
          :show-zero="false"
        >
          <img
            v-if="subsystem.iconId"
            class="subsystem-item-img"
            :src="imageUrl + subsystem.iconId"
            @click="gotoSubsystem(subsystem)"
            @error="subsystem.iconId = ''"
            :alt="subsystem.name"
          />
          <div
            v-else
            class="subsystem-item-box"
            @click="gotoSubsystem(subsystem)"
          >
            <div class="subsystem-item-name">{{subsystem.name}}</div>
          </div>
        </el-badge>
      </div>
    </div>
  </div>
</template>

<script setup>
import api from '@/http/api';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getSetting } from '@/utils/system';
import defaultBgImg from '@/assets/images/background.jpg';
import { useUserStore } from '@/pinia/modules/user';
import loading from '@/utils/loading';
import tool from "@/utils/tool";

const userStore = useUserStore();
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
const subsystemList = ref([]);
const bgImgUrl = ref('');
const logoImgUrl = ref('');

const loadSetting = async() => {
  await getSetting().then(setting => {
    if (setting) {
      bgImgUrl.value = !setting.homeBgImageId ? defaultBgImg : imageUrl.value + setting.homeBgImageId;
      logoImgUrl.value = !setting.homeLogoImageId ? logoImgUrl.value : imageUrl.value + setting.homeLogoImageId;
      document.title = (setting.webTitle || '系统选择').split("<br/>")[0];

      if (setting.chooseCss) {
        const style = document.createElement("style");
        style.textContent = setting.chooseCss;
        document.head.appendChild(style);
      }
    }
  });
};

const loadSubsystem = async() => {
  await api.post('/business/subsystem/list').then(res => {
    if (res.code === '1') {
      subsystemList.value = res.data || [];
    }

    const stop = new URLSearchParams(window.location.search).get("stop");
    if (subsystemList.value.length === 1 && !stop) {
      gotoSubsystem(subsystemList.value[0]);
    } else if (subsystemList.value.length === 0) {
      ElMessage.error("未配置权限，请与管理员联系！");
    } else if (!stop) {
      const find = subsystemList.value.find(item => item.defaultShow === '1');
      if (find) {
        gotoSubsystem(find);
      }
    } else {
      subsystemList.value.forEach(subsystem => {
        if (subsystem.badgeScriptId) {
          api.runScript(subsystem.badgeScriptId, subsystem).then(res => {
            subsystem.badgeNumber = res.data && res.data['totalNumber'] || 0;
          })
        }
      });
    }
  });
};

const gotoSubsystem = async(subsystem) => {
  sessionStorage.removeItem('historyList');
  const basePath = tool.getBaseUrl();
  if (subsystem.type === '1') {
    window.location.href = basePath + '/admin.html';
  } else if (subsystem.type === '2') {
    window.location.href = basePath + '/portal.html';
  } else {
    window.location.href = basePath + '/business.html?subsystemId=' + subsystem.id;
  }
};

onMounted(async() => {
  loading.showLoading("数据加载中...");
  const user = await userStore.initUserInfo();
  if (!user) {
    window.location.href = tool.getBaseUrl() + '/';
    return;
  }

  await loadSetting();
  await loadSubsystem();
  loading.hideLoading();
});
</script>

<style lang="scss">
.choose-subsystem {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.subsystem-item .el-badge__content {
  margin-top: 25px!important;
  margin-right: 25px!important;
  font-size: 16px;
}
.choose-subsystem .logout {
  height: 50px;
  line-height: 50px;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.choose-subsystem .logout .logout-text {
  padding: 0 20px;
  text-align: right;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.choose-subsystem .subsystem-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 15vh;
  flex-wrap: wrap;

  .subsystem-item-img {
    width: 150px;
    height: 150px;
    margin: 20px;
    cursor: pointer;
    border-radius: 20px;
  }
  .subsystem-item-img:hover {
    transform: scale(1.2);
  }

  .subsystem-item-box {
    margin: 20px;
    width: 150px;
    height: 100px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    background-color: #00ccff;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    .subsystem-item-name {
      font-size: 20px;
      color: #ffffff;
    }
  }
  .subsystem-item-box:hover {
    transform: scale(1.2);
  }
}
.choose-subsystem .logo {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
